<template>
  <div style="position: relative">
    <a-upload multiple :showUploadList="false" :before-upload="beforeUpload"
     accept=".docx, .doc, .xlsx, .xls, .pdf, .jpeg, .png">
      <a-button style="margin-bottom: 10px">
        <a-icon type="upload"/>
        选择文件
      </a-button>
    </a-upload>
    <a-button @click="removeAll" style="margin-bottom: 10px;position:absolute;right: 120px;top:5px">
      <a-icon type="close"/>
      全部删除
    </a-button>
    <a-button @click="uploadAll" style="margin-bottom: 10px;position:absolute;right: 0;top:5px">
      <a-icon type="caret-right"/>
      全部上传
    </a-button>
    <a-table
      ref="table"
      size="default"
      rowKey="uid"
      :columns="columns"
      :pagination="false"
      :dataSource="copyFileList"
      class="file-table">
      <template slot="icon" slot-scope="text, record">
        <img :src="fileIcon" alt="">
      </template>
      <template slot="name" slot-scope="text, record">
        <j-ellipsis :value="text" :length="20"/>
      </template>
      <span slot="action" slot-scope="text, record">
          <a-button v-if="record.status === 0" @click="upload(record)" type="link" title="上传">
            <a-icon type="caret-right"/></a-button>
          <a-button v-if="record.status === 1" type="link" title="上传完成">
            <a-icon type="check" style="color:green"/></a-button>
          <a-button v-if="record.status === 2" type="link">
            <a-icon type="loading"/></a-button>
          <a-button @click="remove(record)" type="link" title="删除">
            <a-icon type="close" style="color:red"/></a-button>
      </span>
    </a-table>
    <div class="rem">只能上传Excel类型的文件，包括xls,xlsx,可上传多个，单个文件不超过10M</div>
  </div>
</template>

<script>
  import {deleteAction, uploadAction} from '@/api/manage'
  import fileIcon from './file.png'

  const columns = [
    {
      title: 'icon',
      width: 30,
      align: 'right',
      dataIndex: 'icon',
      scopedSlots: {customRender: 'icon'},
      key: 'icon',
    },
    {
      title: '文件名',
      dataIndex: 'name',
      scopedSlots: {customRender: 'name'},
      key: 'name',
    },
    {
      title: '操作',
      align: 'right',
      dataIndex: 'action',
      width: 80,
      slots: {title: 'actionName'},
      scopedSlots: {customRender: 'action'}
    }
  ];
  export default {
    name: "index",
    data() {
      return {
        fileIcon: fileIcon,
        columns: columns,
        uploading: false,
        copyFileList: [],
      };
    },
    methods: {
      // && item.uid.indexOf('-') !== -1
      fileData() {
        let data = []
        for (let item of this.copyFileList) {
          if (item.path) {
            data.push(item)
          }
        }
        return data
      },
      fileClear() {
        this.copyFileList = []
      },
      remove(record) {
        if (record.path && record.type != '1') {
          this.ApiDel(record, {url: record.path})
        }
        for (let item of this.copyFileList) {
          if (record.uid === item.uid) {
            const index = this.copyFileList.indexOf(item);
            this.copyFileList.splice(index, 1);
          }
        }
      },
      removeAll() {
        for (let record of this.copyFileList) {
          if (record.path && record.type != '1') {
            this.ApiDel(record, {url: record.path})
          }
          this.copyFileList = []
        }
      },
      beforeUpload(file) {
        this.copyFileList.push({uid: file.uid, name: file.name, status: 0, file: file})
        this.uploadAll()
        return false;
      },
      upload(record) {
        this.handleUpload(record)
      },
      uploadAll() {
        for (let item of this.copyFileList) {
          if (item.status === 0) {
            this.handleUpload(item)
          }
        }
      },
      handleUpload(record) {
        console.log(record);
        record.status = 2
        const formData = new FormData();
        formData.append('files', record.file);
        this.ApiSave(record, formData)
      },
      ApiSave(record, formData) {
        uploadAction('/sjtb/dataCollectionTemplateInfo/uploadMulti', formData).then((res) => {
          if (res.success) {
            record.status = 1
            record.type = res.result[0].type
            record.path = res.result[0].uploadFileUrl
            record.newName = res.result[0].newFileName
            record.fileContentMd5 = res.result[0].fileContentMd5
            this.$message.success(res.message)
          } else {
            record.status = 0
            this.$message.warning(res.message)
          }
        })
      },
      ApiDel(record, path) {
        deleteAction('/sjtb/dataCollectionTemplateInfo/deleteFile', path).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    },
  }
</script>

<style scoped lang="less">
  .file-table {
    /deep/ .ant-btn-link {
      padding: 0 5px !important;
    }

    /deep/ .ant-table-thead {
      display: none;
    }

    /deep/ .ant-table-tbody {
      tr {
        width: 100%;
        margin-bottom: 5px !important;

        td {
          padding: 0 5px;
          background-color: #f5f5f5;
          border: 0;
        }
      }
    }
  }

  .rem {
    margin-top: 5px;
    color: #bab9b9;
    font-size: 13px !important;
  }
</style>